<template>
	<view class="content">
		<view @click="selectCurrent(index)" class="item cw" v-for="(item,index) in list">
			<view class="top">
				<view class="top-card f-c-c">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view>{{item.name}}</view>
			</view>
			<view class="bottom f-c-c">
				<input disabled class='inp' type="password" v-model="item.num.slice(0,4)" />
				<input disabled class='inp' type="password" v-model="item.num.slice(4,8)" />
				<input disabled class='inp' type="password" v-model="item.num.slice(8,12)" />
				<input disabled class='inp' style="font-size: 38rpx;" type="text" v-model="item.num.slice(12,16)" />
			</view>

			<!-- @click="showFlag=true" -->
			<view v-show="item.delFlg" @click="showFlag=true" class="del f-c-c">
				<image src="../../static/my/icon_del.png" mode="widthFix"></image>
			</view>
		</view>

		<u-modal @cancel="show=false" @confirm='confirmDel' confirm-color='#F57808' confirm-text='确定' width='550'
			v-model="showFlag" :content="content" :show-cancel-button='true'
			:content-style="{fontSize:'35rpx',color:'#464646',}"></u-modal>

		<view class="addCard f-c-c" @click="$to(`../addCard/addCard`)">
			<image src="../../static/my/icon_jh.png" mode="widthFix"></image>
			<view>添加银行卡</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				showFlag: false,
				content: '是否删除银行卡？'
			}
		},
		onShow() {
			this.getCard()

		},
		methods: {
			async getCard(){
				const res = await this.$u.api.conBankcardInfo({
					consumer: this.vuex_user.id
				})
				this.list = []
				console.log(res);
				res.data.forEach(item => {
					this.list.push({
						url: '../../static/my/icon_yl.png',
						name: item.bankcardType,
						num: item.bankcardNo,
						delFlg: false,
						id:item.id
					})
				})
				console.log(this.list);
			},
			selectCurrent(i) {
				this.list.forEach((item, index) => {
					item.delFlg = false
					if (index == i) {
						item.delFlg = true
					}
				})
			},
			confirmDel() {
				this.list.forEach(async item => {
					if(item.delFlg){
						const res =await this.$u.api.delConBankcard({id:item.id})
						console.log(res);
						res.success?this.getCard():this.$u.toast(res.msg)
					}
					
				})
				// this.$u.toast('已删除')
				// this.show = false
			}
		}
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
		padding: 20rpx;
	}

	.item {
		position: relative;
		background-color: #155294;
		height: 220rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.top {
		display: flex;
		padding: 50rpx;
	}

	.top image {
		width: 43rpx;
	}

	.top-card {
		background-color: #FFFFFF;
		width: 43rpx;
		height: 43rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
	}

	.bottom {
		padding: 0 40rpx;
		margin-top: -20rpx;
	}

	.inp {
		font-size: 60rpx;
		letter-spacing: 8rpx
	}

	.addCard {
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.addCard image {
		width: 40rpx;
		margin-right: 20rpx;
	}

	.del {
		width: 60rpx;
		height: 60rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 0 20rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}

	.del image {
		width: 30rpx;
	}
</style>
